<template>
  <div id="content">
    <el-card>
      <div class="main">
        <div style="display: flex; align-items: baseline; margin-bottom: 30px">
          <h1>欢迎登录</h1>
        </div>
        <el-form :model="loginForm" label-width="50px">
          <el-form-item label="账号">
            <el-input v-model="loginForm.param" clearable></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input
              v-model="loginForm.password"
              show-password
              type="password"
            ></el-input>
          </el-form-item>

          <div class="admin" style="padding-left: 50px">
            <el-checkbox v-model="remb">自动登录</el-checkbox>
            <!-- <i class="el-icon-view" style="margin-left: 80px"></i> -->
            <router-link
              to="/register"
              style="margin-left: 80px; margin-top: -3px"
              >注册账号</router-link
            >
            <!-- <el-link style="margin-top: -3px" type="info" @click="goHome"
              >注册账号</el-link
            > -->
          </div>

          <br />

          <el-form-item>
            <el-button
              style="margin-left: 35px"
              type="primary"
              :loading="load"
              @click="login"
              >登录</el-button
            >
            <el-button style="margin-left: 60px" @click="cancel"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="beian">
      <a
        href="https://beian.miit.gov.cn/"
        target="_blank"
        style="text-decoration: none; color: black; font-size: 13px"
        >Powered By Dong | 浙ICP备2022017856</a
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "wswLogin",
  data() {
    return {
      loginForm: {
        param: "",
        password: "",
      },
      load: false,
      remb: false,
    };
  },
  mounted() {
    // if(localStorage.getItem('automatic-login')){
    //   this.login()
    // }
    if (JSON.parse(localStorage.getItem("automatic-login"))) {
      this.autoLogin();
    }
  },
  methods: {
    async login() {
      let result = await this.$API.reqLogin(this.loginForm);
      if (result.code == 2000) {
        if (this.remb) {
          localStorage.setItem("automatic-login", JSON.stringify(true));
        } else {
          localStorage.setItem("automatic-login", JSON.stringify(false));
        }
        this.$store.dispatch("setuserinfo", result.data);
        this.$router.push("/home");
      } else {
        return Promise.reject(new Error(result.msg || ""));
      }
    },
    goHome() {
      this.$router.push("/home");
    },

    // 自动登录
    async autoLogin() {
      let result = await this.$API.reqAutoLogin();
      if (result.code == 2000) {
        this.$router.push("/home");
      }
    },
    cancel() {
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="less" scoped>
#content {
  margin-top: 60px;
  .main {
  }
  .beian {
    margin-top: 10px;
    // text-align: center;
  }
}
</style>